<template>
  <div class="box">
    <div class="top">
      <div class="cont">
        <div class="cont">
          <p class="route-text">
            <img src="../assets/home.png" class="home" alt="" @click="toHome" />
            <span class="span-margin">/</span>
            <span>{{ title }}</span>
          </p>
          <p class="title">{{ title }}</p>

          <div class="swiper-cont">
            <div class="swiper-left">
              <Swiper :bannerlist="bannerlist"></Swiper>
            </div>
            <div class="swiper-right">
              <div class="board-title">公告</div>
              <div
                class="board-item"
                v-for="item in newslist"
                :key="item.id"
                @click="boardClick(item)"
              >
                <p class="title-text">{{ item.newsTitle }}</p>
              </div>
              <!-- <button v-if="showBaoMing" class="apply-btn" @click="applyClick">
                 {{str?"审核通过":"报名"}}
              </button> -->
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="content">
      <trainList :list="list" @clickmore="clickmore" :title="title"></trainList>
    </div>
  </div>
</template>
<script>
import Swiper from "../components/swiper.vue";
import trainList from "../components/trainList.vue";
import { selectEnrolledUser } from "@/api/apply";
import {
  selectTrainPlanByTrainId,
  slectTrainPlanByTrainName,
} from "@/api/traindetail";
import {
  getNewsByCategoryId,
  selectNewsCategorys,
  selectTrainList,
} from "@/api/home";
import { insertEnroll } from "@/api/apply";
import { setToken, getToken } from "@/utils/auth";
import { mapState, mapMutations } from "vuex";
export default {
  components: {
    Swiper,
    trainList,
  },
  computed: {
    ...mapState(["showDialog"]),
  },
  data() {
    return {
      lits: [],
      allList: [],
      showBaoMing: false,
      title: "",
      newslist: [],
      list: [],
      id: 0,
      bannerlist: [],
      pageNum: 1,
      pageSize: 3,
      total: 0,
      boradId: 0,
      dateTime: 0,
      applylist: [],
      // str:true
    };
  },
  methods: {
    ...mapMutations(["changeDialog"]),
    toHome() {
      this.$router.push("/");
    },

    //报名列表
    slectTrainPlanByTrainName() {
      slectTrainPlanByTrainName({
        trainTitle: this.title,
        pageNum: this.pageNum,
        pageSize: this.pageSize,
      }).then((res) => {
        if (res.code == 200) {
          if (res.result == null) {
            return;
          }
          this.list = this.list.concat(res.result.list);
          // console.log(this.list);
          this.dateTime = new Date().getTime();
          this.list.forEach((item) => {
            let startTime = new Date(item.trainStartTime).getTime();
            let endTime = new Date(item.trainEndTime).getTime();
            if (this.dateTime > endTime) {
              item.isEnd = true;
            }
          });
          this.total = res.result.total;
        } else {
          this.$message("暂无更多");
        }
      });
    },
    selectNewsCategorys() {
      selectNewsCategorys({}).then((res) => {
        res.result.forEach((item) => {
          if (item.newsCategoryName === "公告") {
            this.boradId = item.id;
          }
        });
      });
    },

    getNewsByCategoryId() {
      getNewsByCategoryId({
        newCategoryId: this.boradId,
        pageNum: 1,
        pageSize: 3,
      }).then((res) => {
        // console.log(res);
        this.newslist = res.result.list;
      });

      //轮播图
      getNewsByCategoryId({
        pageNum: 1,
        pageSize: 5,
      }).then((res) => {
        // console.log(res);
        this.bannerlist = res.result.list;
      });
    },

    //加载更多
    clickmore() {
      var totalPage =
        this.total % this.pageSize == 0
          ? this.total / this.pageSize
          : this.total / this.pageSize + 1;
      if (this.pageNum < totalPage) {
        this.pageNum++;
        this.slectTrainPlanByTrainName();
      } else {
        this.$message("暂无更多");
      }
    },
    //点击跳转
    boardClick(item) {
      this.$router.push({
        path: "/boarddetail",
        name: "boarddetail",
        query: {
          id: item.id,
        },
      });
    },
    add0(m) {
      return m < 10 ? "0" + m : m;
    },
    timeFormat() {
      var time = new Date();
      var year = time.getFullYear();
      var month = time.getMonth() + 1;
      var date = time.getDate();
      var hours = time.getHours();
      var minutes = time.getMinutes();
      var seconds = time.getSeconds();
      return (
        year +
        "-" +
        this.add0(month) +
        "-" +
        this.add0(date) +
        " " +
        this.add0(hours) +
        ":" +
        this.add0(minutes) +
        ":" +
        this.add0(seconds)
      );
    },
    applyClick() {
      //判断是否登录
      if (sessionStorage.getItem("name")) {
        slectTrainPlanByTrainName({
          trainTitle: this.title,
        }).then((res) => {
          this.lits = res.result.list;
          this.dateTime = new Date().getTime();
          this.lits.forEach((item) => {
            let startTime = new Date(item.trainStartTime).getTime();
            let endTime = new Date(item.trainEndTime).getTime();
            if (this.dateTime > endTime) {
              item.isEnd = true;
            }
            if (item.isEnd != true) {
              this.applylist.push(item);
            }
          });
          if (this.applylist.length) {
            let personid = sessionStorage.getItem("id");
            let personname = sessionStorage.getItem("name");
            let number = sessionStorage.getItem("jobNumber");
            let time = this.timeFormat();
            let params = this.applylist.map(
              ({ trainId, trainCourseName, id }) => ({
                // applicantId: personid,
                // applicantName: personname,
                // status: 0,
                // createTime: time,
                trainId: trainId,
                trainName: trainCourseName,
                trainPlanId: id,
                jobNumber: number,
              })
            );
            console.log(params);
            this.$confirm("确认报名吗?", "提示", {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
            })
              .then(() => {
                insertEnroll(params).then((res) => {
                  console.log(res);
                  if (res.code == 410) {
                    this.$message({
                      message: "请登录后报名",
                      type: "info",
                    });
                    this.changeDialog(true);
                  } else if (res.code == 200) {
                    this.$message({
                      message: res.message,
                      type: "success",
                    });
                  } else if (res.code == 501) {
                    this.$message({
                      message: res.message,
                      type: "warning",
                    });
                  }
                });
              })
              .catch(() => {
                this.$message({
                  type: "info",
                  message: "已取消",
                });
              });
          } else {
            this.$message({
              type: "info",
              message: "当前无可报名项",
            });
          }
        });
      } else {
        this.$confirm("您还未登录，无法报名，是否登录", "提示", {
          distinguishCancelAndClose: true,
          confirmButtonText: "确定",
          cancelButtonText: "取消",
        })
          .then(() => {
            this.changeDialog(true);
          })
          .catch((action) => {
            this.$message({
              type: "info",
              message: "已取消",
            });
          });
      }
    },
  },
  mounted() {
    
    this.selectNewsCategorys();
    setTimeout(() => {
      this.getNewsByCategoryId();
    }, 500);

    //可以报名的数据
    slectTrainPlanByTrainName({
      trainTitle: this.title,
    }).then((res) => {
      this.lits = res.result.list;
      this.dateTime = new Date().getTime();
      this.lits.forEach((item) => {
        let startTime = new Date(item.trainStartTime).getTime();
        let endTime = new Date(item.trainEndTime).getTime();
        if (this.dateTime > endTime) {
          item.isEnd = true;
        }
        if (item.isEnd != true) {
          this.applylist.push(item);
        }
      });
      
    });

    if (sessionStorage.getItem("jobNumber")) {
      var jobNumber = sessionStorage.getItem("jobNumber");
      // console.log(jobNumber);
      selectEnrolledUser({ jobNumber }).then((res) => {
        this.allList = res.result;
        // console.log(this.allList);
        //  this.applylist.forEach((item, i) => {
        //  if(!this.allList.includes(item.id)){
        //     this.str = false;
        //     return str;
        //  }
      
        // })
      });
    } else {
      this.allList = "";
      // this.str = false
    }
  },
  watch: {
    $route: {
      handler(newV) {
        this.title = newV.query.title;
        this.showBaoMing = this.title === "岗前培训" ? true : false;
        this.$forceUpdate();
        if (newV) {
          this.pageNum = 1;
          this.list = [];
          this.selectNewsCategorys();
          this.slectTrainPlanByTrainName();
          setTimeout(() => {
            this.getNewsByCategoryId();
          }, 500);
        }
      },
      immediate: true,
      deep: true,
    },
  },
};
</script>

<style scoped="scoped">
.box {
  width: 100%;
}

.top {
  width: 100%;
  height: 506px;
  background-color: #106470;
  padding-top: 6px;
  box-sizing: border-box;
}

.cont {
  width: 1200px;
  margin: 0 auto;
}

.content {
  width: 1200px;
  margin: 0 auto;
  margin-top: 50px;
}

.route-text {
  font-size: 12px;
  font-family: Microsoft YaHei;
  font-weight: 300;
  line-height: 26px;
  color: #ffffff;
  height: 55px;
  display: flex;
  align-items: center;
}

.span-margin {
  margin: 0 6px;
}

.home {
  width: 16px;
  height: 16px;
  cursor: pointer;
}

.title {
  font-size: 24px;
  font-family: Microsoft YaHei;
  font-weight: 300;
  line-height: 26px;
  color: #ffffff;
  margin-top: 10px;
}

.swiper-cont {
  display: flex;
  margin-top: 30px;
}

.swiper-left {
  width: 905px;
  height: 428px;
}

.swiper-left >>> .el-carousel__arrow {
  display: none;
}

.swiper-right {
  width: 295px;
  height: 428px;
  background: #f3f3f3;
  padding: 0 20px;
  box-sizing: border-box;
}

.board-title {
  height: 55px;
  line-height: 55px;
  border-bottom: solid #e4e4e4 1px;
  font-size: 16px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #000000;
}

.board-item {
  margin-top: 12px;
  position: relative;
  border-bottom: 1px solid #e5e5e5;
  padding-bottom: 12px;
  cursor: pointer;
}

.title-text {
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  line-height: 24px;
  color: #0070c0;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.apply-btn {
  width: 148px;
  height: 40px;
  background: #000000;
  border: none;
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #ffffff;
  margin-top: 20px;
  margin-left: 53px;
}
</style>
